---
title: "@assistant-ui/react-data-stream"
---

Data Stream protocol integration for assistant-ui.

import { ParametersTable } from "@/components/docs";

## API Reference

### `useDataStreamRuntime`

Create a runtime that connects to a data stream protocol endpoint.

```tsx
import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";

const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
  const runtime = useDataStreamRuntime({
    api: "/api/chat",
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
};
```

<ParametersTable
  parameters={[
    {
      name: "api",
      type: "string",
      description: "The API endpoint URL for the data stream protocol.",
    },
    {
      name: "onResponse",
      type: "(response: Response) => void | Promise<void>",
      description: "Optional callback called when a response is received.",
    },
    {
      name: "onFinish",
      type: "(message: ThreadMessage) => void",
      description: "Optional callback called when a message is finished.",
    },
    {
      name: "onError",
      type: "(error: Error) => void",
      description: "Optional callback called when an error occurs.",
    },
    {
      name: "onCancel",
      type: "() => void",
      description: "Optional callback called when a request is cancelled.",
    },
    {
      name: "credentials",
      type: "RequestCredentials",
      description: "Optional credentials mode for the fetch request.",
    },
    {
      name: "headers",
      type: "Record<string, string> | Headers | (() => Promise<Record<string, string> | Headers>)",
      description: "Optional headers to include in the request.",
    },
    {
      name: "body",
      type: "object",
      description: "Optional additional body parameters to include in the request.",
    },
    {
      name: "sendExtraMessageFields",
      type: "boolean",
      description: "Whether to include extra message fields like IDs in the request.",
    },
  ]}
/>

### `useCloudRuntime`

Create a runtime that connects to Assistant Cloud using the data stream protocol.

```tsx
import { useCloudRuntime } from "@assistant-ui/react-data-stream";

const MyRuntimeProvider = ({ children }: { children: React.ReactNode }) => {
  const runtime = useCloudRuntime({
    cloud: assistantCloud,
    assistantId: "my-assistant-id",
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
};
```

<ParametersTable
  parameters={[
    {
      name: "cloud",
      type: "AssistantCloud",
      description: "The Assistant Cloud instance.",
    },
    {
      name: "assistantId",
      type: "string",
      description: "The ID of the assistant to connect to.",
    },
    {
      name: "onResponse",
      type: "(response: Response) => void | Promise<void>",
      description: "Optional callback called when a response is received.",
    },
    {
      name: "onFinish",
      type: "(message: ThreadMessage) => void",
      description: "Optional callback called when a message is finished.",
    },
    {
      name: "onError",
      type: "(error: Error) => void",
      description: "Optional callback called when an error occurs.",
    },
    {
      name: "onCancel",
      type: "() => void",
      description: "Optional callback called when a request is cancelled.",
    },
    {
      name: "credentials",
      type: "RequestCredentials",
      description: "Optional credentials mode for the fetch request.",
    },
    {
      name: "headers",
      type: "Record<string, string> | Headers | (() => Promise<Record<string, string> | Headers>)",
      description: "Optional headers to include in the request.",
    },
    {
      name: "body",
      type: "object",
      description: "Optional additional body parameters to include in the request.",
    },
    {
      name: "sendExtraMessageFields",
      type: "boolean",
      description: "Whether to include extra message fields like IDs in the request.",
    },
  ]}
/>

### `toLanguageModelMessages`

Convert assistant-ui messages to language model format.

```tsx
import { toLanguageModelMessages } from "@assistant-ui/react-data-stream";

const languageModelMessages = toLanguageModelMessages(messages, {
  unstable_includeId: true,
});
```

<ParametersTable
  parameters={[
    {
      name: "messages",
      type: "readonly ThreadMessage[]",
      description: "The messages to convert.",
    },
    {
      name: "options",
      type: "{ unstable_includeId?: boolean }",
      description: "Optional conversion options.",
      children: [
        {
          type: "{ unstable_includeId?: boolean }",
          parameters: [
            {
              name: "unstable_includeId",
              type: "boolean",
              description: "Whether to include message IDs in the converted messages.",
            },
          ],
        },
      ],
    },
  ]}
/>